<template>
    <div class="b-header">
        <div class="b-header-bg flex">
            <div class="logo-container" v-if="showLogo">
                <router-link :to="showUser ? '/index' : '/login'">
                    <img src="static/images/logo.png">
                </router-link>     
            </div>
            <div class="menu-container" v-if="showMenu" @click="$emit('menu-change')">
                <i class="iconfont icon-daohang"></i>
            </div>
            <div class="login-now" v-if="showLoginNow">
                <router-link to="/login">立即登陆</router-link>
            </div>
            <div class="register-now" v-if="showRegisterNow">
                <router-link to="/settle">入驻注册</router-link>
            </div>
            <div class="service" v-if="showUser" @mouseenter="showService = true" @mouseleave="showService = false">
                <i class="iconfont icon-kefu"></i>
                客服电话
                <transition name="fade">
                    <div class="service-detail" v-show="showService">
                        <div class="phone-number">400-801-9131</div>
                        <div class="date">400-801-9131</div>
                        <div class="h-line"></div>
                        <div class="qr-icon">
                            <img src="static/images/qr-code.jpg">
                        </div>
                        <div class="text">「修炼科技提供技术支持」</div>
                    </div>
                </transition>
            </div>
            <div class="message" v-if="showUser" @mouseenter="showMessage = true" @mouseleave="showMessage = false">
                <i class="iconfont icon-xiaoxi"></i>
                <div class="msg-count">99</div>
                <transition name="fade">
                    <div class="message-detail action-list" v-show="showMessage">
                        <div class="action-item" @click.stop="$router.push('/informMessage')">
                            <i class="iconfont icon-shezhi"></i>
                            系统消息
                            <div class="msg-count system">99</div>
                        </div>
                        <div class="action-item" @click.stop="$router.push('/evaluateMessage')">
                            <i class="iconfont icon-pinglun"></i>
                            评价消息
                            <div class="msg-count evaluate">99</div>
                        </div>
                        <div class="action-item" @click.stop="$router.push('/complainMessage')">
                            <i class="iconfont icon-tousu"></i>
                            投诉消息
                            <div class="msg-count complain">99</div>
                        </div>
                    </div>
                </transition>
            </div>
            <div class="user-container flex" v-if="showUser" @mouseenter="showAction = true" @mouseleave="showAction = false">
                <div class="user-icon">
                    <img src="http://img.hb.aicdn.com/49ea473c0ec8080c546cbf4bdf20305feb8535591a464-tw6Es2_sq320">
                </div>
                <div class="user-name">
                    {{companyName}}
                    <i class="iconfont icon-jiantou-xia"></i>
                </div>
                <transition name="fade">
                    <div class="action-list" v-show="showAction">
                        <div class="action-item" @click.stop="goTo('/businessInfo')">经营信息</div>
                        <div class="action-item" @click.stop="goTo('/account')">账号设置</div>
                        <div class="action-item login-out" @click.stop="showModel = true">
                            <i class="iconfont icon-tuichu"></i>
                            退出登录
                        </div>
                    </div>
                </transition>
            </div>
        </div>

        <Modal v-model="showModel" :closable="false" :transfer="false" :styles="{width: '310px', height: '144px'}">
            <p>确定退出登录？</p>
            <div slot="footer">
                <i-button type="ghost" @click.stop="showModel = false">取消</i-button>
                <i-button type="ghost" @click.stop="loginOut" class="confirm">确定</i-button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    props: {
        showLogo: {         //是否显示logo
            type: Boolean,
            default: true
        },
        showLoginNow: {     //是否显示立即登录
            type: Boolean,
            default: false
        },
        showRegisterNow: {  //是否显示立即注册
            type: Boolean,
            default: false
        },
        showUser: {         //是否显示用户登录信息
            type: Boolean,
            default: false
        },
        showMenu: {         //是否显示导航切换按钮
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showAction: false,  //用户下拉框
            showService: false, //联系下拉框
            showMessage: false, //消息下拉框
            showModel: false,   //退出登录弹窗
            companyName: ''
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            let account = this.$utils.Storage.getObj('B_ACCOUNT');
            if(account && account.company) this.companyName = account.company.name;
        },
        goTo(path) {
            this.$router.push(path);
        },
        loginOut() {
            this.$ajax(this.$api.login.logout, (RES)=>{
                this.goTo('/login');
            }, (error)=>{
                this.goTo('/login');
            })
        }
    }
}
</script>

<style lang="less">

.b-header {
    @hover-bg: #F0F7FE;
    background: white;
    box-shadow: inset 0px -1px 0px 0px #e9eaec;
    position: relative;
    z-index: 1100;
    .b-header-bg{
        justify-content: flex-end;
        width: 100%;
        max-width: @min-width;
        margin: auto;
        height: @header-height;
        line-height: @header-height;
        align-items: center;

        .logo-container {
            flex-grow: 1;
            img {
                vertical-align: middle;
            }
        }

        .login-now,.register-now {
            margin-left: 10px;
            font-size: 14px;
        }

        .menu-container{
            flex-grow: 1;
            .iconfont{
                cursor: pointer;
                color: @color-Content;
                font-size: 20px;
                &:hover{
                    color: @color-Title;
                }
            }
        }
        .message,.service{
            padding: 0 20px;
            .iconfont{
                font-size: 20px;
                vertical-align: middle;
                margin-right: 4px;
            }
            &:hover{
                background: @hover-bg;
            }
        }
        .msg-count{
            position: absolute;
            top: 13px;
            right: 13px;
            background: @color-Error;
            border-radius: 7px;
            width: 20px;
            height: 14px;
            text-align: center;
            line-height: 14px;
            color: white;
            font-size: 12px;
            &.system{
                background: @color-Primary;
            }
            &.evaluate{
                background: @color-Warning;
            }
            &.complain,&.evaluate,&.system{
                right: 18px;
            }
        }
        .user-container,.message,.service{
            transition: all linear 0.2s;
            cursor: pointer;
            position: relative;
            font-size: 14px;
        }
        .user-container {
            margin-left: 18px;
            .user-icon {
                img {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    vertical-align: middle;
                }
            }
            .user-name {
                line-height: inherit;
                margin-left: 10px;
                .icon-jiantou-xia{
                    font-size: 10px;
                }
            }
        }
        .service-detail, .action-list, .message-detail{
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0);
            background-color: #ffffff;
            box-shadow: 0px 2px 4px 0px #e9eaec;
            border: 1px solid #e9eaec;
            border-radius: 3px;
        }
        .service-detail{
            text-align: center;
            width: 200px;
            height: 233px;
            padding: 15px 27px;
            .phone-number{
                line-height: 30px;
                color: #1c2438;
                font-size: 22px;
            }
            .date{
                line-height: 17px;
                color: @color-Sub;
                font-size: 12px;
            }
            .h-line{
                margin: 15px 0;
            }
            .qr-icon{
                img{
                    width: 100px;
                    height: 100px;
                    border: 1px solid @color-Border;
                    vertical-align: middle;
                }
            }
            .text{
                line-height: 17px;
                color: @color-Sub;
                font-size: 12px;
                margin-top: 8px;
            }
        }
        .message-detail{
            width: 180px;
            height: 140px;
            padding-bottom: 10px;
        }
        .action-list{
            width: 150px;
            padding-top: 10px;
            .action-item{
                width: 100%;
                position: relative;
                background-color: white;
                line-height: normal;
                padding: 10px 25px;
                transition: all linear 0.2s;
                &:hover{
                    background: @hover-bg;
                }
                .iconfont{
                    vertical-align: middle;
                    position: relative;
                    bottom: 1px;
                    font-size: 16px;
                }
            }
            .login-out{
                padding: 12px 25px;
                box-shadow: 0px -1px 0px 0px #e9eaec;
                .iconfont{
                    color: @color-Error;
                }
            }
        }
    }
    .ivu-modal-wrap{
        .ivu-modal-body{
            padding: 30px 25px 20px;
            font-size: 14px;
        }
        .ivu-modal-footer{
            padding: 0px 25px 15px;
            border: none;
            .ivu-btn{
                margin-left: 15px;
            }
            .confirm{
                color: @color-Error;
                transition: all linear 0.2s;
                &:hover{
                    border-color: @color-Error;
                }
            }
        }
    }
}
</style>

